import React, { useEffect, useState } from 'react'
import {
  Card,
  Breadcrumb,
  Form,
  Button,
  Radio,
  Select,
  DatePicker,
  Table,
  Input,
  InputNumber,
  Typography,
  Space,
} from 'antd'
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'

import { useDispatch, useSelector } from 'react-redux'
import styles from './index.module.scss'
import { Link } from 'react-router-dom'
import { actionChannels } from '@/store/actions/channels'
import { actionArticleList } from '@/store/actions/article'
/* 默认图片 */
import defaultImg from '@/assets/images/defaultImage.png'
const { Option } = Select
const { RangePicker } = DatePicker

/* 获取redux中的数据 */
// import { useDispatch, useSelector } from 'react-redux'

/* 表格 */
const EditableTable = () => {
  const articleList = useSelector((state) => state.article)
  const save = async (key) => {}
  const cancel = async (key) => {}
  /* 控制每一列 */
  const columns = [
    {
      title: '封面',
      dataIndex: 'cover',
      key: 'cover',
      width: '20%',
      editable: true,
      render: (_, record) => {
        // console.log(_, record, 887755)
        return (
          <div>
            <img
              alt=""
              style={{ width: '150px' }}
              src={record.cover.type ? record.cover.images[0] : defaultImg}
            />
          </div>
        )
      },
    },
    {
      title: '标题',
      dataIndex: 'title',
      width: '10%',
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: '10%',
    },
    {
      title: '发布时间',
      dataIndex: 'pubdate',
      width: '15%',
    },
    {
      title: '阅读数',
      dataIndex: 'read_count',
      width: '10%',
    },
    {
      title: '评论数',
      dataIndex: 'comment_count',
      width: '10%',
    },
    {
      title: '点赞数',
      dataIndex: 'like_count',
      width: '10%',
    },
    {
      title: 'operation',
      dataIndex: 'operation',
      render: (_, record) => {
        return (
          <Space>
            <Button
              type="primary"
              shape="circle"
              icon={<EditOutlined />}
            ></Button>
            <Button
              type="primary"
              shape="circle"
              danger
              icon={<DeleteOutlined />}
            ></Button>
          </Space>
        )
      },
    },
  ]

  return (
    <Table
      rowKey="id"
      dataSource={articleList} // 表格数据
      columns={columns}
      rowClassName="editable-row"
      pagination={{
        onChange: cancel,
      }}
    />
  )
}

/* 表格 */
export default function Article() {
  const dispatch = useDispatch()
  const channels = useSelector((state) => state.channels)

  useEffect(() => {
    /* 获取频道 */
    dispatch(actionChannels)
    /* 获取文章列表 */
    dispatch(actionArticleList())
  }, [])
  return (
    <div className={styles.root}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/layout/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>文章列表</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form>
          <Form.Item label="状态">
            <Radio.Group>
              <Radio value={-1}>全部</Radio>
              <Radio value={0}>草稿</Radio>
              <Radio value={1}>待审核</Radio>
              <Radio value={2}>审核通过</Radio>
              <Radio value={3}>审核失败</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item label="频道">
            <Select placeholder="请选择频道" style={{ width: 200 }}>
              {channels.map((item) => {
                return (
                  <Option key={item.id} value={item.id}>
                    {item.name}
                  </Option>
                )
              })}
              <Option value="jack">Jack</Option>
            </Select>
          </Form.Item>

          <Form.Item label="日期">
            <RangePicker />
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit">
              筛选
            </Button>
          </Form.Item>
        </Form>
        {/* 表格 */}
        <EditableTable />
      </Card>
    </div>
  )
}
